<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="example-prop">
			<!-- 传递静态属性 -->
			<blog-post title="dd"></blog-post>
			<!-- v-bind 传递动态属性 -->
			<blog-post v-bind:title="title"></blog-post>
			
			<div>
				
				<base-input
				  v-model="username"
				  required
				  placeholder="Enter your username"
				></base-input>
			</div>
		</div>	
		<!-- 
		动态组件
		 -->
		<script type="text/javascript">
			Vue.component('blog-post',{
				props:['title'],
				template:'<h3>{{title}}</h3>'
			})
			
			Vue.component('base-input', {
			  inheritAttrs: false,
			  props: ['label', 'value'],
			  template: `
			    <label>
			      {{ label }}
			      <input
			        v-bind="$attrs"
			        v-bind:value="value"
			        v-on:input="$emit('input', $event.target.value)"
			      >
			    </label>
			  `
			})
			let app=new Vue({
				el:'#example-prop',
				data:{
					username:'',
					title:'kkk',
				}
			})
		</script>	
		<style type="text/css">
		</style>
	</body>
</html>
